<!--
 * @Author: mayijun
 * @Date: 2022-06-13 17:36:03
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-10 10:24:44
-->
<script lang="ts" setup>
import { onMounted, ref, reactive } from 'vue';
import TableHeader from '../tableHeader/index.vue';
import NavLeft from '../navLeft/index.vue';
import ModelList from '../modelList/index.vue';
import ModelContent from '../modelContent/index.vue';
import DerivedContent from '../derivedContent/index.vue';
import FromDerivedContent from '../fromDerivedContent/index.vue';
import API from '@/services';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();

const query = reactive<any>({
  ...route.query
});

const metricsDetailData: any = ref({});

const isNotMicroApp = ref<boolean>(true);

isNotMicroApp.value = !window.__MICRO_APP_ENVIRONMENT__;
if (isNotMicroApp.value) {
  document.getElementsByTagName('body')[0].className = 'source-not-micro-app';
}
//查询原子指标详情
const getIndexDetail = async () => {
  try {
    const { data, code } =
      await API.metricsModelRelation.getGetModelLogicDetailById({
        id: query.id
      });
    if (code === 200) {
      metricsDetailData.value = data;
    }
    console.log('指标详情--------', data);
  } catch (error) {}
};

//查询派生指标详情
const getDeriveDetail = async () => {
  try {
    const { data, code } =
      await API.metricsModelRelation.getGetDeriveModelDetailById({
        id: query.id
      });
    if (code === 200) {
      metricsDetailData.value = data;
    }
    console.log('指标详情--------', data);
  } catch (error) {}
};

//查询衍生指标详情
const getFormDeriveDetail = async () => {
  try {
    const { data, code } =
      await API.metricsModelRelation.getGetDerivedDevelopDetailById({
        id: query.id
      });
    if (code === 200) {
      metricsDetailData.value = data;
    }
    console.log('指标详情--------', data);
  } catch (error) {}
};

onMounted(() => {
  if (query.id && query.metricsType == 1) {
    getIndexDetail();
  }
  if (query.id && query.metricsType == 2) {
    getDeriveDetail();
  }
  if (query.id && query.metricsType == 3) {
    getFormDeriveDetail();
  }
  document.getElementsByTagName('html')[0].style.fontSize = query.fontSize;
});
</script>
<template>
  <table-header></table-header>
  <div class="detail-main" :style="{marginTop:isNotMicroApp?'60px':'0'}">
    <div class="detail-main_nav">
      <nav-left></nav-left>
    </div>
    <div class="detail-main_content" v-if="query.metricsType == 1">
      <model-list :metrics-detail-data="metricsDetailData"></model-list>
      <model-content :metrics-detail-data="metricsDetailData"></model-content>
    </div>
    <div class="detail-main_content" v-if="query.metricsType == 2">
      <DerivedContent :deriveDetailData="metricsDetailData"></DerivedContent>
    </div>
    <div class="detail-main_content" v-if="query.metricsType == 3">
      <FromDerivedContent :deriveDetailData="metricsDetailData"></FromDerivedContent>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import './index.scss';
</style>